<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css" />
		<style>
			.color1{
				height: 100px;
				background-color: aqua;
			}
			.color2{
				height: 100px;
				background-color: blueviolet;
			}
			.color3{
				height: 100px;
				background-color: aqua;
			}
			.color4{
				height: 100px;
				background-color: blueviolet;
			}
			.news{
				height: 100px;
				width: 1200px;
				background-color: aquamarine;
				margin: auto;
			}
			@media(max-width:575px){
				.news{
					width: 100%;
				}
			}
			@media(min-width:576px) and (max-width:767px){
					.news{
						width: 100%;
					}
			}
		</style>
	</head>
	<body>
		<div class="layui-row news">
				<div class="layui-col-xs12 layui-col-sm6 color1">111</div>
				<div class="layui-col-xs12 layui-col-sm6 color2">222</div>
		</div>
		<br>
		<!-- nav -->
		<div class="layui-row layui-hide-xs">
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3 color3">logo</div>
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3 color4 ">caidan</div>
		</div>
		<!-- nav -->
		<div class="layui-row layui-hide-md layui-hide-sm">
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3 color3">
				<i class="layui-"></i>
			</div>
		</div>
		<br>
		<div class="layui-row">
			<!-- 手机12 平板8 电脑4 -->
			<div clas s="layui-col-xs12 layui-col-sm8 layui-col-md4 color1"></div>
			<!-- 手机12 平板4 电脑8 -->
			<div class="layui-col-xs12 layui-col-sm4 layui-col-md8 color2"></div>
		</div>
	</body>
	<script src="../layui-v2.6.8/layui/layui.js"></script>
</html>
